<template>
  <v-modal :showModal="showLoading" :maskClosable="false" @close="close">
    <div id="loading" slot="content" v-if="showLoading"><i class="iconfont icon-loading"></i>{{loadingOptions.content}}</div>
  </v-modal>
</template>

<script type="text/ecmascript-6">
  import Modal from 'base/modal/modal'
  import {mapGetters, mapActions} from 'vuex'

  export default {
    name: 'loading',
    data() {
      return {
        showLoading: false
      }
    },
    computed: {
      ...mapGetters([
        'loadingShow',
        'loadingOptions'
      ])
    },
    methods: {
      close() {
        this.closeLoading()
      },
      ...mapActions([
        'closeLoading'
      ])
    },
    watch: {
      loadingShow(val) {
        this.showLoading = val
      }
    },
    components: {
      'v-modal': Modal
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #loading {
    position: fixed;
    z-index: 1000;
    height: 35px;
    line-height: 35px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: $color-highlight-background;
    border: 1px solid #999999;
    box-sizing: border-box;
    padding: 0 20px;
    color: #eeeeee;
    font-size: $font-size-medium;
    white-space: nowrap;
    overflow: hidden;
    &.content-animate-enter-active, &.content-animate-leave-active {
      transition: all .7s;
    }
    &.content-animate-enter, &.content-animate-leave-to {
      opacity: 0;
    }
    i {
      display: inline-block;
      margin-right: 5px;
      animation: self-rotate 1s linear;
      animation-iteration-count: infinite;
    }
  }

  @keyframes self-rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
